<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer"/>
    <title>- 注册页面 -</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./stylesheets/register.css">
</head>

<body>

    <!-- 页面头部 -->
    <div class="header-box">
        <div class="header">
            <!-- 头部导航 -->
            <div class="header-nav">
                <a class="header-logo" href="/">
                    <img src="//static.21cake.com/themes/site/img/logo.png" alt="21cake logo">
                    <!-- <img src="/themes/site/img/logo.png" alt=""> -->
                </a>
                <!-- 导航中部 -->
                <ul class="nav-box">
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./goodsList_pagination.html" target="_self">蛋糕</a></li>
                    <li><a href="./goodsList_pagination.html" target="_self">面包</a></li>
                    <li><a href="./goodsList_pagination.html" target="_self">冰淇淋</a></li>
                    <li><a href="./goodsList_pagination.html" target="_self">咖啡下午茶</a></li>
                    <li><a href="./goodsList_pagination.html" target="_self">咖啡全国送</a></li>
                    <li><a href="./goodsList_pagination.html" target="_self">企业专区</a></li>
                </ul>
                <!-- 导航右侧 -->
                <ul class="right-city-user">
                    <li class="header-app app-download">
                        <a>APP下载</a>
                        <ul class="app-list">
                            <li><img src="https://static.21cake.com/themes/site/img/footer-erweima.png"><a>下载享更多优惠</a>
                            </li>
                        </ul>
                    </li>
                    <li class="current-city"><a>北京<i></i></a>
                        <ul class="current-city-list">
                            <li><a>上海</a></li>
                            <li><a>天津</a></li>
                            <li><a>杭州</a></li>
                            <li><a>无锡</a></li>
                            <li><a>苏州</a></li>
                            <li><a>广州</a></li>
                            <li><a>深圳</a></li>
                        </ul>
                    </li>
                    <li class="message-list-header  header-select">
                        <a href="/message/center.html">消息</a>
                        <ul>
                            <li><a href="/message/center.html" target="_blank">通知</a></li>
                            <li><a href="/message/center.html?#delivery" target="_blank">物流</a></li>
                        </ul>
                    </li>
                    <li><a href="./login.html">登录</a>/
                        <a href="./register.html">注册</a>
                    </li>
                    <li class="header-cart">
                        <a href="./carts.html" id="cart-count-icon">
                            <i></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<!-- 内容表单  -->
<div class="container">
                       
    <div class="row">
          <div class="alert tip" role="alert" >
                <a href="#" class="alert-link">...</a>
          </div>
          <div class="col-md-6 col-md-offset-3">
                <h3>用户注册</h3>
                <form class="register-form" id="register_form"> 
                      <div class="form-group">
                            <div class="input-group">
                            <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                            用户名：<input type="text" class="form-control" id="username" placeholder="请输入用户名" value="">
                            </div>
                      </div>
                      <div class="form-group">
                            <div class="input-group">
                            <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                            密码：<input type="password" class="form-control" id="password" placeholder="请输入密码" value="">
                            </div>
                      </div>
                      <button type="submit" class="btn btn-primary" id="register" >注册</button>
                </form>
          </div>
    </div>

</div>
<!-- 内容表单  end-->

<script>
var register = document.getElementById("register");
var form = document.getElementById("register_form");
var userIpt = document.getElementById("username");
var pwdIpt = document.getElementById("password");
var alert = document.querySelector(".alert");

// console.log(alert);
// 该变量表示是否已经发送了请求;
var loading = false;
// 阻止表单默认事件;
form.onsubmit = function(evt){
    var e = evt || window.event;
    e.preventDefault();
}
// 获取数据发送请求;
register.onclick = function(evt){
    if(loading) return false;
    var username_yzm = userIpt.value;
    var password_yzm = pwdIpt.value;

    loading = true;
    register.disabled = "disabled";
    register.innerHTML = "loading...";
    xhrPost("http://47.107.82.140/yuanzhimin/register.php",{
          username_yzm ,
          password_yzm 
    })
    .then((res)=>{
          console.log(res);
          loading = false;
          register.removeAttribute("disabled");
          register.innerHTML = "注册";

          // 注册信息处理;
          res = JSON.parse(res);
          if(res.statu === "success"){
                showInfo("success","恭喜!注册成功，我们三秒钟之后会为您跳转到登陆界面!");
                setTimeout( a => {
                      // 存cookie;

                      cookie("password",res.password,{
                           
                            path :"/"
                      });
                      cookie("username",username_yzm,{
                            
                            path :"/"
                      });

                      location.href = "./login.html";
                },3000)
          }else if(res.statu === "error"){
                showInfo("error" , res.errorType)
          }
          
    })
}

function showInfo(type,text){
    var children = alert.children[0];
    // 1. 改变元素的 className ;
    if(type === "success"){
          alert.className = "alert alert-success"
    }else if(type === "error"){
          alert.className = "alert alert-danger"
    }
    // 2. 显示内容;
    children.innerHTML = text;
    alert.style.display = "block";

    setTimeout(()=>{
          alert.style.display = "none";
    },3000)
}

//post请求的封装
function xhrPost(url, data) {
        return new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var _data = [];
            for (let key in data) {
                _data.push(`${key}=${data[key]}`);
            }
            xhr.send(_data.join("&"));
            xhr.onload = function () {
                xhr.status === 200 ? resolve(xhr.responseText) : reject(xhr.status);
            }
        })
    }
    //coolie的封装
    function cookie(key, value, options) {
        var res = "";
        res += key + "=" + encodeURI(value);
        // 有没有过期时间;
        if (typeof options.expires === "number") {
            var d = new Date()
            d.setDate(d.getDate() + options.expires);
            res += ";expires=" + d;
        }
        res += options.path ? ";path=" + options.path : "";
        res += options.domain ? ";domain=" + options.domain : "";

        document.cookie = res;
    }


</script>


    <!-- 底部 -->
    <div class="footer">
            <img class="footer-logo" src="//static.21cake.com/themes/site/img/footer-logo.png" height="36" width="96" alt="">
            <div class="footer-nav">
                <a href="/doc-about-55.html">联系我们</a>
                <span>|</span>
                <a href="/doc-distribution-40.html">订购帮助</a>
                <span>|</span>
                <a href="/doc-about-56.html">企业合作</a>
                <span>|</span>
                <a href="/doc-about-115.html">生产经营资质</a>
                <span>|</span>
                <a href="/article-company.html">公告专区</a>
            </div>
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="//static.21cake.com/themes/site/img/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima" style="display: none;">
                        <img src="//static.21cake.com/themes/site/img/erweima.png" style="top: 0px;">
                    </div>
                    <img src="//static.21cake.com/themes/site/img/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima">
                        <img src="//static.21cake.com/themes/site/img/footer-erweima.png">
                    </div>
                    <!-- <img src="//static.21cake.com/themes/site/img/footericon-03.png"> -->
                    APP
                </a>
            </div>
            
            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00），企业团购热线：021-37768396</span>
                <span>客服电话：021-23099721（全国），kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
        </div>


   
    <!-- <script src="./scripts/register.js"></script> -->
</body>

</html>